<template>
  <view class="page-content">
    <view class="home-head">
      <view class="home-head-logo">
        <view class="home-logo">
          <image
            class="home-logo-image"
            src="../../static/image/logo.png"
          ></image>
          <text class="home-logo-text">爱馨之家</text>
        </view>
        <view class="home-logo-banner-text">
          <view class="home-logo-banner-title"
            ><text class="home-logo-banner-title-text"
              >专业高端的护工服务</text
            ></view
          >
          <view class="home-logo-banner-tips"
            ><text class="home-logo-banner-title-text"
              >贴心呵护 专业照护</text
            ></view
          >
        </view>
      </view>
      <view class="home-head-tips">
        <view class="home-head-tips-item" v-for="item in tips" :key="item">
          <uni-icons type="checkbox" size="16" color="#1dcb91"></uni-icons>
          <text class="home-head-tips-text">{{ item }}</text>
        </view>
      </view>
      <image
        class="home-head-image"
        src="../../static/image/index-bg.png"
      ></image>
    </view>
    <view class="make-main">
      <view class="make-main-list">
        <view
          class="make-main-item"
          v-for="item in state.makeList"
          :key="item.id"
          :class="item.isClass"
        >
          <view class="make-main-item-title">{{ item.title }}</view>
          <view class="make-main-item-main">
            <view
              class="make-main-item-main-tips"
              v-for="itemChild in item.tips"
              :key="itemChild"
              >{{ itemChild }}</view
            >
          </view>
          <view class="make-main-item-btn" @click="predetermine(item)"
            >立即预约</view
          >
          <image class="make-main-image" :src="item.bg"></image>
        </view>
      </view>
    </view>

    <view class="services-main">
      <view class="main-title">平台服务</view>
      <view class="service-content">
        <view class="service-content-left">
          <view class="service-content-title">平台介绍</view>
          <text class="service-content-text">一文读懂爱馨之家是谁？</text>
        </view>
        <image
          class="service-content-right"
          src="../../static/image/bg-3.png"
        ></image>
      </view>
    </view>

    <!-- <view class="services-main services-main-make">
      <view class="main-title">明星护工</view>
      <view class="make-content">
        <MakeList :listData="nursingStaffList"></MakeList>
      </view>
    </view> -->
  </view>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";

import Bg1 from "../../static/image/bg-1.png";
import Bg2 from "../../static/image/bg-2.png";

import MakeList from "../../components/make/index.vue";

let tips = ref(["100%实名认证", "专业培训", "百万保险", "高效管理"]);
let state = reactive({
  makeList: [
    {
      id: 1,
      title: "住院护理",
      isClass: "make-main-item-blue",
      tips: ["术后陪护", "专病照护", "重症看护"],
      bg: Bg1,
    },
    {
      id: 2,
      title: "居家陪护",
      isClass: "make-main-item-yellow",
      tips: ["高龄护理", "长期陪护", "生活看护"],
      bg: Bg2,
    },
  ],
});

let nursingStaffList = ref([]);
let isHide = ref(false);

import { GetNursingStaff } from "@/api/common";

const GetNursingStaffList = async () => {
  isHide.value = false;
  let { data } = await GetNursingStaff();
  nursingStaffList.value = data;
  isHide.value = true;
};

const predetermine = (item) => {
  uni.navigateTo({
    url: "/pages/predetermine/index?types=" + item.id,
  });
};

onMounted(() => {
  GetNursingStaffList();
});
</script>

<style lang="scss" scoped>
// "https://dyimgoss.oss-cn-beijing.aliyuncs.com/app%2Fbase%2Fc4d282234c4142279b0c5fca93f8029c_index-bg.png"
.page-content {
  background: #f2f2f2;
  min-height: 100vh;
  .home-head {
    position: relative;
    width: 100vw;
    height: 75vw;
    // background: url('https://dyimgoss.oss-cn-beijing.aliyuncs.com/app%2Fbase%2Fc4d282234c4142279b0c5fca93f8029c_index-bg.png') no-repeat 100%;
  }
}
.home-head-image {
  width: 100vw;
  height: 70vw;
  z-index: 1;
}
.home-head-logo {
  padding-top: var(--status-bar-height);
  position: absolute;
  top: 40rpx;
  left: 20rpx;
  z-index: 999;
  .home-logo {
    margin-top: 30rpx;
    display: flex;
    align-items: center;
  }
  .home-logo-image {
    width: 75rpx;
    height: 75rpx;
    margin-right: 20rpx;
  }
  .home-logo-text {
    font-size: 36rpx;
    font-weight: bold;
    color: #fff;
  }
  .home-logo-banner-text {
    margin-top: 60rpx;
    text-align: center;
    .home-logo-banner-title {
      font-size: 42rpx;
      line-height: 1.5;
      width: calc(100vw - 40rpx);
      .home-logo-banner-title-text {
        border-bottom: 1px solid #fff;
      }
    }
    .home-logo-banner-title-text {
      color: #f3f3f3;
    }
    .home-logo-banner-tips {
      font-size: 28rpx;
      line-height: 1.5;
      position: relative;
      z-index: 99;
    }
  }
}

.home-head-tips {
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 60rpx;
  left: 0;
  right: 0;
  z-index: 999;
  .home-head-tips-text {
    color: #1dcb91;
    font-size: 24rpx;
  }
  .home-head-tips-item {
    display: flex;
    margin-right: 10rpx;
    align-items: center;
  }
}
.make-main {
  margin-top: -40rpx;
}
.make-main-list {
  display: flex;
  .make-main-item {
    width: calc(50vw - 30rpx);
    margin-left: 20rpx;
    border-radius: 24rpx;
    overflow: hidden;
    position: relative;
    height: 60vw;
    .make-main-image {
      position: absolute;
      bottom: 0;
      left: 0;
      width: calc(50vw - 30rpx);
      height: 60vw;
      z-index: 1;
    }
  }
  // .make-main-item-blue {
  //   background: url("../../static/image/bg-1.png") #fff;
  // }
  // .make-main-item-yellow {
  //   background: url("../../static/image/bg-2.png") #fff;
  // }
  .make-main-item-title {
    width: 232rpx;
    height: 72rpx;
    font-size: 36rpx;
    color: #fff;
    text-align: center;
    line-height: 72rpx;
    border-radius: 0 0 24rpx 0;
  }
  .make-main-item-title,
  .make-main-item-main,
  .make-main-item-btn {
    position: relative;
    z-index: 9999;
  }
  .make-main-item-btn {
    position: absolute;
    right: 20rpx;
    bottom: 20rpx;
    padding: 0 24rpx;
    line-height: 64rpx;
    color: #fff;
    text-align: center;
    border-radius: 12rpx;
    font-size: 32rpx;
  }
  .make-main-item-main {
    padding-top: 30rpx;
  }
  .make-main-item-main-tips {
    padding: 0 30rpx;
    line-height: 60rpx;
    color: #999;
    display: flex;
    align-items: center;
    &::before {
      content: "";
      display: inline-block;
      width: 12rpx;
      height: 12rpx;
      border-radius: 12rpx;
      margin-right: 5px;
    }
  }
  // "https://dyimgoss.oss-cn-beijing.aliyuncs.com/app%2Fbase%2F8aedebff22c847ddb7b570f8238e71bd_bg-1.png"
  // "https://dyimgoss.oss-cn-beijing.aliyuncs.com/app%2Fbase%2F263f8986c746487582ffb06b5022cd12_bg-2.png"
  .make-main-item-blue {
    // background: url("https://dyimgoss.oss-cn-beijing.aliyuncs.com/app%2Fbase%2F8aedebff22c847ddb7b570f8238e71bd_bg-1.png") no-repeat 100%;
    .make-main-item-title {
      background: linear-gradient(rgb(26, 140, 255) 0%, rgb(84, 176, 254) 100%);
    }
    .make-main-item-main-tips {
      &::before {
        background: #1dcb91;
      }
    }
    .make-main-item-btn {
      background: #1dcb91;
    }
  }
  .make-main-item-yellow {
    // background: url("https://dyimgoss.oss-cn-beijing.aliyuncs.com/app%2Fbase%2F263f8986c746487582ffb06b5022cd12_bg-2.png") no-repeat 100%;
    .make-main-item-title {
      background: linear-gradient(
        rgb(240, 172, 94) 0%,
        rgb(253, 202, 122) 100%
      );
    }
    .make-main-item-main-tips {
      &::before {
        background: #ffb968;
      }
    }
    .make-main-item-btn {
      background: #ffb968;
    }
  }
}
.main-title {
  display: flex;
  font-size: 28rpx;
  font-weight: bold;
  align-items: center;
  height: 36rpx;
  &::before {
    content: "";
    display: inline-block;
    width: 8rpx;
    height: 36rpx;
    background: linear-gradient(rgb(26, 140, 255) 0%, rgb(84, 176, 254) 100%);
    margin-right: 5px;
  }
}

.services-main {
  margin: 20rpx;
  .service-content {
    position: relative;
    margin-top: 15rpx;
    border-radius: 12px;
    overflow: hidden;
    height: 316rpx;
    .service-content-left {
      position: relative;
      z-index: 999;
      padding: 50px 40rpx 0 40rpx;
      .service-content-title {
        font-size: 40rpx;
        color: #1dcb91;
      }
      .service-content-text {
        font-size: 28rpx;
        color: #999;
        margin-top: 10rpx;
        display: block;
      }
    }
    .service-content-right {
      width: 1040rpx;
      height: 316rpx;
      position: absolute;
      right: 0;
      top: 0;
    }
  }
}

.services-main-make {
  padding-bottom: 20rpx;
}
</style>
